<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>[简历]刘福洲-前端开发工程师</title>
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/typo.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <script>
        function loadding() {
            document.getElementsByClassName('avatar')[0].style.display = 'block';
            document.getElementsByClassName('loading')[0].style.display = 'none';
        }
    </script>
</head>

<body>

    <header class="header"></header>

    <article class="container">
        <section class="side" id="side">


            <style>
                @media (min-width: 750px) {
                    .switch {
                        position: relative;
                        display: inline-block !important;
                        width: 60px;
                        height: 34px;
                    }

                    .switch input {
                        display: none;
                    }

                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #ccc;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }

                    .slider:before {
                        position: absolute;
                        content: "";
                        height: 26px;
                        width: 26px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }

                    input:checked+.slider {
                        background-color: #1abc9c;
                    }

                    input:focus+.slider {
                        box-shadow: 0 0 1px #1abc9c;
                    }

                    input:checked+.slider:before {
                        -webkit-transform: translateX(26px);
                        -ms-transform: translateX(26px);
                        transform: translateX(26px);
                    }

                    .slider.round {
                        border-radius: 34px;
                    }

                    .slider.round:before {
                        border-radius: 50%;
                    }
                }
            </style>


            <!-- 个人肖像 -->
            <section class="me">
                <section class="portrait">
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <!-- 头像照片 -->
                    <img class="avatar" src="assets/images/me.jpg" onload="loadding()"
                        onerror="console.error('图片加载失败')">
                </section>

                <h1 class="name">刘福洲</h1>
                <h4 class="info-job">前端开发工程师 </h4>

            </section>

            <!-- 基本信息 -->
            <section class="profile info-unit">
                <h2>
                    <i class="fa fa-user" aria-hidden="true"></i>基本信息
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>个人信息</label>
                        <span>刘福洲 / 男 / 21岁</span>
                    </li>
                    <li>
                        <label>英语水平</label>
                        <span>CET-4</span>
                    </li>
                    <li>
                        <label>所获奖项</label>
                        <span>蓝桥杯大赛软件赛省赛二等奖
                            、2024年中国全校计算机大赛-团队天梯赛三等奖</span>

                    </li>
                </ul>
            </section>

            <!-- 联系方式 -->
            <section class="contact info-unit">
                <h2>
                    <i class="fa fa-phone" aria-hidden="true"></i>联系方式
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>手机</label>
                        <a href="tel:19579403219">19579403219</a>
                    </li>
                    <li>
                        <label>邮箱</label>
                        <a href="mailto: fuzhouliu330@gmail.com" target="_blank">fuzhouliu330@gmail.com</a>
                    </li>
                    <li>
                        <label>个人博客</label>
                        <a href="https://blog.csdn.net/m0_73887414"
                            target="_blank">https://blog.csdn.net/m0_73887414</a>
                    </li>
                    <li>
                        <label>Github</label>
                        <a href="https://github.com/XXUZZWZ" target="_blank">https://github.com/XXUZZWZ</a>
                    </li>
                </ul>
            </section>

            <!-- 技能点 -->
            <section class="skill info-unit">
                <h2>
                    <i class="fa fa-code" aria-hidden="true"></i>技能点
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>HTML</label>
                        <progress value="90" max="100"></progress>
                    </li>
                    <li>
                        <label>CSS</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>JavaScript</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>React</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>Node.js</label>
                        <progress value="70" max="100"></progress>
                    </li>
                    <li>
                        <label>小程序</label>
                        <progress value="70" max="100"></progress>
                    </li>
                </ul>
            </section>
            <!-- 
            <section class="qrcode info-unit">
                <h2><i class="fa fa-qrcode" aria-hidden="true"></i>二维码</h2>
                <hr />
                <img src="https://github.com/if2er/FeZaoDuKe-Collection/blob/master/ifeees.jpg?raw=true"
                    style="width: 100%;" alt="">
            </section> -->

            <!-- 技术栈 -->
            <div class="stack info-unit">
                <h2><i class="fa fa-code" aria-hidden="true"></i>技术栈</h2>
                <hr />
                <ul>
                    <li>
                        <label>前端</label>
                        <span>React、vue3、微信小程序</span>
                    </li>
                    <!-- <li>
                        <label>后端</label>
                        <span>Node.js、MySQL、MongoDB、WordPress、ThinkPHP</span>
                    </li> -->
                    <li>
                        <label>其他</label>
                        <span>Git、Markdown</span>
                    </li>
                </ul>
            </div>
        </section>

        <section class="main">

            <!-- 教育经历 -->
            <section class="edu info-unit">
                <h2>
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3>
                            <span>东华理工大学 - 软件工程专业（本科）</span>
                            <time>2023.9-2027.7</time>
                        </h3>
                        <p>专业排名
                            <mark>113/986</mark>专业课和实训成绩均高于总成绩90%。
                        </p>
                    </li>
                    <!-- <li>
                        <h3>
                            <span>XXXX大学 - XXX专业（本科）</span>
                            <time>201X.9-201X.7</time>
                        </h3>
                        <p>专业排名
                            <mark>X/XX</mark>，期间发表国内核心期刊文章X篇，三等奖学金X次。
                        </p>
                    </li> -->
                </ul>
            </section>

            <!-- 工作经历 -->
            <section class="work info-unit">
                <h2>
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历
                </h2>
                <hr />
                <ul>

                    <li>
                        <h3>
                            <span>[经历1]东华理工大学——技术志愿者</span>
                            <time>2025.02 至 2025.03</time>
                        </h3>
                        <ul class="info-content">
                            <li>为非营利组织开发在线捐赠系统，使用
                                <mark>React + express 全栈项目</mark> 构建跨平台移动网页。
                            </li>
                            <li>通过用户调研优化界面交互，提升捐赠转化率15%。
                            </li>
                            <li>独立开发，项目在一周内交付并获得用户好评。
                            </li>
                        </ul>
                    </li>
                    <!-- <li>
                        <h3>
                            <span>[经历2]XX－前端开发工程师（实习）</span>
                            <time>20XX.10-20XX.7</time>
                        </h3>
                        <ul class="info-content">
                            <li>深度参与公司主线产品「XXXX」的前端开发工作，完成帖子快捷回复、
                                <mark>全站图片懒加载</mark>、活动banner、帖子管理（使用Yii框架）等功能。项目采用技术栈phpWind+NAMP。
                                <a href="http://itsay.tech/162/" target="_blank">
                                    <i class="fa fa-link" aria-hidden="true"></i>博客文章</a>。
                            </li>
                            <li>主要参与公司产品「XXXX」的前端开发工作，实现接入微博、微信、QQ等
                                <mark>第三方账号登录</mark>等功能。项目采用技术栈WordPress+NAMP。
                            </li>
                            <li>活动页面的开发（七夕活动、抽奖活动以及承接外包页面）。</li>
                            <li>论坛
                                <mark>图片增量备份</mark>（CentOS+vsftpd+crontab）
                                <a href="#" target="_blank">
                                    <i class="fa fa-link" aria-hidden="true"></i>博客文章</a>。
                            </li>
                        </ul>
                    </li> -->
                </ul>
            </section>

            <!-- 项目经验 -->
            <section class="project info-unit">
                <h2>
                    <i class="fa fa-terminal" aria-hidden="true"></i>个人项目
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3> <span>[项目1]个人作品展示网站</span> <span class="link"> <a href="#" target="_blank">Demo</a> </span>
                            <time>2025.01-2025.02</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：HTML5+CSS3+JavaScript+Vue.js</li>
                            <li> <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]搭建个人作品展示平台，实现作品分类展示、响应式布局及交互功能 <br /> <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]独立完成 <br /> <i class="fa fa-bars" aria-hidden="true"></i> [贡献]完成从
                                <mark>“需求分析-UI设计-前端开发-测试优化”</mark>全流程，独立实现作品卡片动态渲染、移动端适配、表单交互功能开发，并通过Vue Router实现多页面跳转
                                <br /> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> [效果]项目成功部署至GitHub
                                Pages，获得300+次访问量，作为求职作品集被多家企业技术面试采用
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3> <span>[项目2]电商产品展示系统</span> <span class="link"> <a href="#" target="_blank">Demo</a> </span>
                            <time>2025.04-2025.05</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：React.js + Redux + React Router + Axios + Bootstrap</li>
                            <li> <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]开发移动端适配的电商系统，实现商品分类浏览、搜索、购物车管理和用户注册登录功能 <br /> <i class="fa fa-users"
                                    aria-hidden="true"></i> [团队]与 1 名后端工程师协作 <br /> <i class="fa fa-bars"
                                    aria-hidden="true"></i> [贡献]主导前端开发全流程，使用
                                <mark>“需求分析-组件设计-状态管理-API对接-测试部署”</mark>，实现： <br /> - 通过React组件化开发实现商品卡片动态渲染 <br /> -
                                基于Redux管理购物车状态，Axios对接后端API获取商品数据 <br /> - 使用Bootstrap栅格系统完成响应式布局适配 <br /> -
                                集成Firebase实现用户注册登录功能 <br /> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]系统部署至Vercel，完成商品数据接口对接测试，实现核心业务流程，获得团队"最佳前端实践"奖项
                            </li>
                        </ul>
                    </li>
                    <!-- <li>
                        <h3>
                            <span>[项目1]医学科学数据管理与共享平台</span>
                            <span class="link">
                                <a href="#" target="_blank">Demo</a>
                            </span>
                            <time>201X.X-201X.X</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：ThinkPHP+MongoDB+Axure</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]实现多类型多来源医学科学数据的提交、管理和共享
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]同 2 位同专业同学一起
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]完成从
                                <mark>“调研-设计-实现-文档”</mark>等工作，主要负责系统原型、功能框架及数据提交流程、元数据及源数据的管理与共享方案的设计以及系统开发等工作
                                <br />
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]作品最终取得第三届共享杯国家级竞赛“一等奖” （2/2000）
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目2]肿瘤流行病数据可视化</span>
                            <span class="link">
                                <a href="#" target="_blank">Demo</a>
                            </span>
                            <time>201X.X-201X.X</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：HTML 5+D3.js+ECharts+MySQL</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]与 1 位同学
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]分析项目需求，清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据)，并用
                                <mark>D3.js</mark> 和
                                <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析 功能
                                <br />
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目3]肿瘤流行病数据可视化</span>
                            <span class="link">
                                <a href="#" target="_blank">Demo</a>
                            </span>
                            <time>201X.X-201X.X</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：HTML 5+D3.js+ECharts+MySQL</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]与 1 位同学
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]分析项目需求，清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据)，并用
                                <mark>D3.js</mark> 和
                                <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析功能
                                <br />
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目4]肿瘤流行病数据可视化</span>
                            <span class="link">
                                <a href="#" target="_blank">Demo</a>
                            </span>
                            <time>201X.X-201X.X</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：HTML 5+D3.js+ECharts+MySQL</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]与 1 位
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]分析项目需求，清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据)，并用
                                <mark>D3.js</mark> 和
                                <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析 功能
                                <br />
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
                            </li>
                        </ul>
                    </li> -->

                </ul>
            </section>

            <!-- 自我评价 -->
            <section class="work info-unit">
                <h2>
                    <i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望
                </h2>
                <hr />
                <p>
                <p> 喜爱跑步，坚持夜跑200km+。</p>
                <p>“多静多思考，反省不张扬”</p>
                <p>是我给自己总结的“十字箴言”，鞭策自己做人既不能以己度人，也不以人观己。</p>
                <p> 要脚踏实地做事，坚持自己的梦想和本心。</p>
                </p>
            </section>

        </section>

    </article>



    <footer class="footer">
        <p>© 2025 刘福洲.文档最后更新时间为
            <time>2025年04月02日</time>.
        </p>
    </footer>



    <script src="./assets/js/index.js"></script>
</body>

</html>